<template>
    <el-tooltip :content="content" placement="top">
        <el-button
            v-bind="$attrs"
            v-on="$listeners"
        >{{ content }}</el-button>
    </el-tooltip>
</template>

<script>
export default {
    name:"HintButton",
    // 问题: 如果把 el-button 的所有属性都在 props 中接收一下,那么需要接收的属性太多了,有没有什么办法可以减少接收的属性呢?
    // props: ['type', 'size', 'icon', 'content']
    props: ['content'],
    // 1. $attrs
    //      所有绑定在组件标签上的属性都可以通过 $attrs 拿到,除了 style 和 class 和 props 已经接收过的属性
    //      这里使用 v-bind="$attrs"  可以把接到的所有属性都绑定到当前组件上
    //      注意: 这里的 v-bind 不能简写
    // 2. $listeners
    //      所有绑定在组件标签上的事件都可以通过 $listeners 拿到
    //      这里使用 v-on="$listeners" 可以把接收到的所有事件都绑定到当前组件上
    //      注意: 这里的 v-on 不能简写
    // 场景:
    //      当我们自己对第三方组件进行二次封装的时候,使用 $attrs 和 $listeners 比较合适
    mounted() {
        // console.log(this.$attrs)
        console.log(this.$listeners)
    },
    methods: {
        // clickHandler(e) {
        //     console.log('我爱你 - 子组件 - 参数', e)
        //     this.$emit('click', e)
        // }
    }
}
</script>

<style scoped>

</style>